<template>
  <div class="realphotogroup">
    <div class="tit">
      <span class="goback" style="font-size: .2rem;font-weight: 700;">分类鉴定</span>
      <el-date-picker style="width: 3.5rem;margin:0 .2rem;" @change="trandate" v-model="pst" type="daterange"
        range-separator="-" start-placeholder="请选择时间" end-placeholder="请选择时间">
      </el-date-picker>
    </div>

    <div class="box clearfix">
      <div class="smallbox" v-for="(item, index) in imglist">
        <div @click="goauthenticate(item, index)">
          <div v-for="im in reverse(item.pathList)"><img :src="im" alt=""></div>

          <span
            style="position: absolute;top: 0;right: .2rem;top: .2rem;display: inline-block;line-height: .2rem;border-radius: 2px;background-color: red;color: #ffffff"
            v-for="dn in item.discernName.split('#')">{{ dn }}</span>

          <div class="txt">
            <span>{{ item.number }}</span>
            &nbsp;
            <span class="el-icon-picture"></span>
            <span class="isok" :style="item.status == 0 ? 'background-color: red;' : 'background-color: #00CC46;'">
              {{ item.status == 0 ? '未鉴定' : '已鉴定' }}
            </span>
          </div>
        </div>
        <div>
          <span>组编号：{{ item.groupNum }}</span>
          <span v-if="abilityList.indexOf('edit') != -1" @click="delG(item)"
            style="margin-left: .3rem;text-decoration: underline;color: red;cursor: pointer">删&nbsp;除</span>
          <br>
          <span>时间：{{ item.shootTime }}</span>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import http from '../utils/http'
import api from '../utils/api'

export default {
  data() {
    return {
      card: 0,
      imglist: [],
      pst: "",
      t1: "",
      id: "",
      abilityList: [],
      areaId: "",
      startDate: "",
      endDate: ""
    }
  },
  mounted() {

  },
  created() {
    this.areaId = sessionStorage.getItem('areaId');
    this.card = this.$route.query.card;
    this.id = this.$route.query.id;
    this.abilityList = sessionStorage.getItem('abilityList');
    this.getdata();
  },
  methods: {
    delG(item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let vm = this;
        (async function f() {
          let res = await http.delete(api.infrared.deleteByGroupName + '?areaId=' + vm.areaId + '&startDate=' + vm.startDate + '&endDate=' + vm.endDate + '&discernName=' + item.discernName)

          if (res.data.code == '200') {
            vm.$message({
              message: '删除成功',
              type: 'success'
            })
            vm.getdata();
          } else {
            vm.$message({
              message: res.data.message,
              type: 'success'
            })
          }
        })()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    reverse(t) {
      var a = [];
      t.forEach(e => {
        let iv = e.split('.');
        if (iv[iv.length - 1].toLowerCase() == 'mp4') {
          a.unshift("../../static/images/shipin.jpg");
        } else {
          a.unshift(e)
        }
      })
      return a;
    },

    goauthenticate(d, index) {
      // imglist
      this.$router.push({
        path: "/Photo/classify/classifyDetails",
        query: {
          date: this.t1,
          keyword: d.discernName,
        }
      })
    },
    getdata() {
      var vm = this, id = this.$route.query.id;
      (async function () {
        let res = await http.get('/iapi/authenticate/getNameGroups', {
          areaId: vm.areaId,
          date: vm.t1
        })
        if (res.data.message == '成功') {
          var a = res.data.data;
          for (var i = 0; i < a.length; i++) {
            for (var k = 0; k < 3; k++) {
              if (a[i].pathList[k] == undefined) {
                a[i].pathList[k] = '../../static/images/huitu.jpg'
              }
            }
          }
          vm.imglist = a;
        }
      })()
    },
    trandate(daterange) {
      if (this.pst != null) {
        var year = daterange[0].getFullYear();
        var month = daterange[0].getMonth() + 1;
        var date = daterange[0].getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        var t1 = year + "-" + month + "-" + date;
        var years = daterange[1].getFullYear();
        var months = daterange[1].getMonth() + 1;
        var dates = daterange[1].getDate();
        if (months >= 1 && months <= 9) {
          months = "0" + months;
        }
        if (dates >= 0 && dates <= 9) {
          dates = "0" + dates;
        }
        var t2 = years + "-" + months + "-" + dates;
        this.t1 = t1 + "~" + t2;
        this.startDate = t1;
        this.endDate = t2;
      } else {
        this.t1 = "";
      }
      this.getdata();
    },
  }
}
</script>
<style scoped>
@import "../../static/css/realphotogroup.css";
</style>
